<!-- 关于作者 -->
<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="false">
			<block slot="content">联系我们</block>
		</cu-custom>
		
		<div class="map">
			<map v-if="orgnization" scale="12" :latitude="orgnization.latitude" :longitude="orgnization.longitude" :markers="orgnization.covers"></map>
			
			<view class="description" :style="{top: top + 'rpx'}">
				<view class="titleZ text-center align-center">
					<view class="contentZ margin-top-lg" @click="callPhoneNumber">
						<text class="text-lg text-bold">联系电话</text>
						<text class="text-lg" v-if="orgnization">：{{ orgnization.mobile }}</text>
					</view>
					<view class="contentZ" style="margin-top: 30rpx;">
						<text class="text-lg text-bold">联系地址</text>
						<text class="text-lg" v-if="orgnization">：{{ orgnization.address }}</text>
					</view>
				</view>
			</view>
		</div>

		<!-- 加载弹窗 -->
		<view class="cu-load load-modal" v-if="loading">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<image src="https://mini.wm-mis.com/img/static/car.png" mode="aspectFit" class="round"></image>
			<view class="gray-text">加载中...</view>
		</view>
	</view>
</template>

<script>
	import api from '@/api/api'
	import {
		mapActions,
		mapState
	} from "vuex"
	export default {
		computed: {
			...mapState([
				'merchant'
			]),
			top() {
				return this.CustomBar * 2 + 20
			}
		},
		data() {
			return {
				animation_timer: null, // 动画定时器
				width: 375,
				height: 1920,
				orgnization: '',
				loading: false
			}
		},
		async mounted() {
			await this.getOrgDetail();
		},
		methods: {
			async getOrgDetail() {
				let that = this
				that.loading = true
				let res = await api.platformDetail({
					orgCode: that.merchant.orgCode
				})
				if (res.data.code == 0 && res.data.success) {
					res.data.result.longitude = Number(res.data.result.longitude)
					res.data.result.latitude = Number(res.data.result.latitude)
					res.data.result.covers = [{
						latitude: res.data.result.latitude,
						longitude: res.data.result.longitude
					}]
					that.orgnization = res.data.result
				}
				that.loading = false
			},
			callPhoneNumber() {
				uni.makePhoneCall({
					phoneNumber: this.orgnization.mobile,
				});
			},
		}
	}
</script>

<style scoped>
	.titleZ {
		width: 670rpx;
		font-size: 52rpx;
		margin-top: 0rpx;
	}

	.contentZ {
		width: 650rpx;
		margin: 10rpx auto 0;
		text-align: left;
	}

	.about-bg {
		background-size: cover;
		width: 100vw;
		height: 100vh;
		justify-content: center;
		flex-direction: column;
		color: #333;
	}

	.edit-fixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.detail-imgs image {
		width: 100%;
		float: left;
		/* height:400rpx; 不定高了*/
		border: 0;
		padding: 0;
		margin: 0
	}

	.share-img {
		position: fixed;
		padding: 10rpx;
		width: 100rpx;
		height: 100rpx;
		/* top: 680rpx; */
		bottom: 200rpx;
		right: 20rpx;
		z-index: 1024;
		opacity: 0.8;
		box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(0, 0, 0, 0.3);
		border: none;
	}

	.about {
		margin: 0;
		width: 100%;
		height: 100vh;
		padding-top: 20%;
		color: #333;
		background: linear-gradient(-120deg, #F15BB5, #9A5CE5, #01BEFF, #00F5D4);
		/* background: linear-gradient(-120deg, #0976ea, #c471f5, #f956b6, #ea7e0a); */
		background-size: 500% 500%;
		animation: gradientBG 15s ease infinite;
	}

	@keyframes gradientBG {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}
	}

	.container {
		width: 100%;
		position: absolute;
		text-align: center;
	}

	.like-fx {
		position: fixed;
		right: 0;
		z-index: 1024;
		pointer-events: none;
		/* background-color: red; */
	}
	.map{
		width: 100%; 
		height: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
	}
	.map map{
		width: 100%; 
		height: 100%;
	}
	.map .description{
		position: absolute;
		left: 20rpx;
		top: 140rpx;
		width: calc( 100% - 40rpx );
		background: rgba(255,255,255,0.8);
		padding: 20rpx;
		border-radius: 10rpx;
	}
</style>